<template>
  <div class="login-container">
    <div class="main">
      <img src="../../assets/common/avatar.png" class="avatarImg" alt="" />
      <img src="../../assets/common/YUKUERP.png" class="yukuImg" alt="" />
      <div class="form">
        <el-form ref="form" :model="loginForm" :rules="loginRules">
          <p class="txt">账号</p>
          <el-form-item prop="userName">
            <el-input v-clearEmoji class="textarea" v-model="loginForm.userName" placeholder="请输入手机号"
              @keydown.enter.native="login" />
          </el-form-item>
          <p class="txt">密码</p>
          <el-form-item prop="password">
            <div class="elinput">
              <el-input v-clearEmoji class="elinput2" v-model="loginForm.password" placeholder="请输入密码"
                :type="flagType ? 'password' : 'text'" @keydown.enter.native="login">
                <svg-icon slot="suffix" class="" color="#b6b6b6" :icon-class="flagType ? 'eye' : 'eye-open'"
                  style="margin-top: 8px; font-size: 18px" @click.prevent.stop="showPedFn" />
              </el-input>
            </div>
          </el-form-item>
          <p class="txt">验证码</p>
          <el-form-item prop="code">
            <div class="elinput1">
              <el-input v-clearEmoji v-model="loginForm.code" style="width: 100%" placeholder="请输入验证码"
                @keydown.enter.native="login" />
              <img class="codeImg" :src="imgSrc" alt="刷新验证码" title="刷新验证码" @click="getCaptha" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginForm.isRemember"> 记住密码 </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button class="btnLogin" type="primary" @click.native.prevent="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getImg, getImgId, checkImg } from "@/api/user";
import { rsaEncrypt, rsaDecrypt } from "@/utils/commonUtil3";
import md5 from "md5";
export default {
  name: "Login",
  data() {
    return {
      height: "",
      imgId: "",
      capthaEnable: false,
      imgSrc: "",
      flagType: true, // 控制密码框图标
      loginForm: {
        userName: process.env.NODE_ENV === "development" ? "" : "",
        password: process.env.NODE_ENV === "development" ? "" : "",
        isRemember: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        userName: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur",
          },
          // , {
          //   pattern: /^1[3-9]\d{9}$/,
          //   message: '手机号格式不正确',
          //   trigger: 'blur'
          // },
        ],
        password: [
          {
            required: true,
            message: "登录密码不能为空",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "密码长度应该为6-16位之间",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      ipAddress: "",
    };
  },
  watch: {},
  created() {
    this.getImgId();
    this.$store.dispatch("user/setimgBaseUrl");
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const userInfo = localStorage.getItem("erp_userName");
      if (userInfo) {
        this.loginForm.isRemember = true;
        this.loginForm.userName = localStorage.getItem("erp_userName");
        this.loginForm.password = rsaDecrypt(localStorage.getItem("erp_password"));
      }
    },
    async getImgId() {
      const res = await getImgId();
      console.log(res);
      if (res.code === 200) {
        this.imgId = res.data;
        this.getCaptha();
      } else {
        this.$message.error("获取验证码失败，请刷新网页");
      }
    },
    async getCaptha() {
      const res = await getImg(this.imgId);
      this.imgSrc = URL.createObjectURL(res.data);
      console.log(res);
    },
    showPedFn() {
      this.flagType = !this.flagType;
    },
    login() {
      this.$refs.form.validate(async (isOK) => {
        if (isOK) {
          // alert('校验通过'
          if (this.loading) return;
          this.loading = true;
          // 先验证验证码
          const res = await checkImg({
            captchaKey: this.imgId,
            captchaValue: this.loginForm.code,
          });
          if (res.code === 200) {
            const password = md5(this.loginForm.password);
            this.$store
              .dispatch("user/login", {
                userName: this.loginForm.userName,
                password: password,
              })
              .then((res) => {
                if (res !== 200) {
                  this.getImgId();
                  this.loginForm.code = "";
                  // return
                }
                console.log(99999878787, res);
                if (this.loginForm.isRemember) {
                  localStorage.setItem("erp_userName", this.loginForm.userName);
                  localStorage.setItem("erp_password", rsaEncrypt(this.loginForm.password));
                }
                this.$router.push("/");
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
                console.log("登录失败");
                this.getImgId();
              });
          } else {
            this.loading = false;
            this.loginForm.code = "";
            this.getImgId();
            // this.$message.error("验证码错误");
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  background-image: url("../../assets/common/logobg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 83.33% 94.81%;
  background-color: #111d3c;

  .main {
    padding-left: 5.7135rem;
    padding-top: 0.5208rem;

    .avatarImg {
      display: block;
      width: 1.8229rem;
      height: 0.6667rem;
      margin-left: 0.3021rem;
      margin-bottom: 20px;
    }

    .yukuImg {
      display: block;
      width: 1.5781rem;
      height: 0.3802rem;
      margin-left: 0.4219rem;
      margin-bottom: 0.3125rem;
    }

    .form {
      width: 2.5156rem;

      .txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24px;
        color: #ffffff;
        line-height: 0.1458rem;
        margin: 0;
        margin-bottom: 0.0521rem;
      }

      .btnLogin {
        width: 2.5156rem;
        height: 0.3958rem;
        background: #00b2ff;
        border-radius: 0.0521rem;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26px;
        text-align: center;
        color: #002152;
      }
    }
  }
}

.el-input {
  height: 0.2656rem;
  margin: 0;
  padding: 0;
  display: flex;

  ::v-deep .el-input__inner {
    text-align: left;
    padding-left: 0px;
    height: 0.2656rem;
    /* line-height:.2656rem; */
    font-weight: normal;
    /* margin: 0; */
    background: rgba(255, 255, 255, 0);
    border: none;
    border-bottom: 2px solid #00b2ff;
    font-size: 20px;
    color: #ffffff;
    border-radius: 0%;
  }
}

.elinput {
  .el-input {
    height: 0.2656rem;
    /* background: pink; */
    margin: 0;
    padding: 0;
    display: flex;

    /* .elinput2{ */
    ::v-deep .el-input__inner {
      text-align: left;
      padding-left: 0px;
      height: 0.2656rem;
      font-weight: normal;
      line-height: 0.2656rem;
      background: rgba(255, 255, 255, 0);
      border: none;
      border-bottom: 2px solid rgba(255, 255, 255, 0.7) !important;
      font-size: 20px;
      color: #ffffff;
    }

    /* } */
  }
}

.elinput1 {
  padding-bottom: 5px;
  display: flex;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7) !important;

  .el-input {
    height: 0.2656rem;
    margin: 0;
    padding: 0;
    border-right: 2px solid #fff;
    display: flex;

    ::v-deep .el-input__inner {
      text-align: left;
      padding-left: 0px;
      height: 0.2656rem;
      font-weight: normal;
      line-height: 0.2656rem;
      background: rgba(255, 255, 255, 0);
      border: none;
      /* border-bottom: 2px solid #FFFFFF !important;  */
      font-size: 20px;
      color: #ffffff;
    }
  }

  .codeImg {
    width: 0.5208rem;
    height: 0.2188rem;
    line-height: 0.2656rem;
    margin: 0 0.1563rem;
    border-radius: 4px 4px 4px 4px;
    padding-left: 0.0521rem;
    padding-top: 5px;
    background-color: #fff;
  }
}

.el-checkbox {
  margin: 0;
  padding: 0;
}

.el-form-item__content {
  line-height: 0.2656rem;
}
</style>
